<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">

    <center>

        <form action="" id="asistencia-form" class="">
            <fieldset>
                <legend> </legend>
                <div class="control-group">        
                    <div class="controls">
                        <select  class="input" name="tipo_asistencia" id="tipo_asistencia">
                            <option value="entrada">Entrada</option>
                            <option value="salida">Salida</option>
                        </select>   
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <input type="text" class="input" placeholder="Ingrese cedula" name="cedula" id="cedula">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Registrar</button>
            </fieldset>
        </form>
    </center>    

</div>
<script>
    $('#asistencia-form').validate(
            {
                rules: {
                    cedula: {
                        minlength: 1,
                        required: true,
                        cedula: true
                    },
                    tipo_asistencia: {
                        required: true
                    }
                },
                highlight: function(element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function(element) {
                    element.closest('.control-group').removeClass('error').addClass('success');
                },
                submitHandler: function(form) {
                    validar();
                }
            });
    function validar() {
        console.log("validar")

        $.ajax({
            url: './mysql/query.php?query=' + 'listar_asistencia_validar&&asistencia=7&valor1=\'' + $("#tipo_asistencia").val() + "\'&valor2=\'" + $("#cedula").val() + "\'",
            data: null,
            dataType: 'json',
            success: function(data)
            {
                console.log("data: " + data)
                if (data == '{"result":0}') {
                    enviarAsistencia();
                } else {
                    $("#errorAsistencia").removeClass("hidden")
                    setTimeout("jQuery('#error').addClass('hidden')", 9000);

                }
            },
            failure: function(response) {
                console.log("failure:" + response)
            },
            error: function(response) {
                console.log(response.status)
                if (response.status === 401) {
                    $("#content").html("Usuario no autorizado");
                }

            }

        });
    }

    function enviarAsistencia() {
        var formJson = arrayToJson($('#asistencia-form').serializeArray());
        var turno = "";
        if (formJson.tipo_asistencia === "entrada") {
            turno = 'Manana';
        } else {
            turno = 'Tarde';
        }

        var valores = "(now()" + ", '" + formJson.tipo_asistencia + "','" + turno + "','" + formJson.cedula + "')";
        $.ajax({
            url: './mysql/query.php?query=' + 'insertar_asistencia&valores=' + valores + "&asistencia=7",
            data: null,
            dataType: 'json',
            type: "GET",
            success: function(data)
            {
                console.log(data)
                if (data != '{"result":0}') {
                    $("#exito").removeClass("hidden")
                    setTimeout("jQuery('#exito').addClass('hidden')", 9000);
                    $("#cedula").val("");
                } else {
                    $("#error").removeClass("hidden")
                    setTimeout("jQuery('#error').addClass('hidden')", 9000);
                }

            },
            failure: function(response) {
                $("#error").removeClass("hidden")
                setTimeout("jQuery('#error').addClass('hidden')", 9000);
                console.log("failure:" + response)
            },
            error: function(response) {
                console.log("error..")
                $("#error").removeClass("hidden")
                setTimeout("jQuery('#error').addClass('hidden')", 9000);
                console.log(response.status)
                if (response.status === 401) {
                    $("#content").html("Usuario no autorizado");
                }

            }

        });
    }
</script>
<script src="js/libs/messages_es.js"></script>  
<script src="js/libs/valid.js"></script> 
